import React, { useState, useEffect } from 'react'
import { getBook } from "../../../components/api"
import style from "../shuku/index.module.css"
import { Tabs } from 'antd-mobile'
import { NavLink } from 'react-router-dom'
const {div,shuku,bu}=style
export default function Shuku() {
    const [BookList, setBookList] = useState<any>([])
    const getBookList = async (e: any) => {
        let res = await getBook(e)
        // console.log(res, "123");
        setBookList(res.data)
    }
    useEffect(() => {
        getBookList("short")
    }, [])

    const aa = [
        {
            tab: "short",
            label: "短篇"

        },

        {
            tab: "long",
            label: "长篇"
        },
        {
            tab: "works",
            label: "作品集"
        },
        {
            tab: "middle",
            label: "中篇"
        },
    ]
    const add = () => {
        window.history.go(-1);
    }
    return (
        <div className={shuku}>
            <>
             <h2>
                        <span onClick={add}>&lt;</span>
                    <p>书库</p>
            </h2>
                <div className={bu}>
                    <Tabs
                    activeLineMode='fixed'
                    style={{
                        '--fixed-active-line-width': '20px',
                    }}
                    onChange={(e) => {
                        getBookList(e)
                    }}
                >
                    {
                        
                        aa.map(item =>
                            <Tabs.Tab title={item.label} key={item.tab}>
                                {
                                    BookList && BookList.map((ite: any) =>
                                        <NavLink to={"/bookdetail/"+ite.id}>
                                            <div className={div}>
                                            <img src={ite.cover}></img>
                                            <p>{ite.name}</p>
                                        </div>
                                        </NavLink>
                                        

                                    )
                                }
                            </Tabs.Tab>
                        )
                    }
                </Tabs>
              </div>
                
            </>
        </div>
    )
}
